<template>
  <div>
    <div id="myChart" :style="{width:'870px',height:'392px'}"></div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/title");

export default {
  props: {
    //X轴数据
    chartXData:{
      type:Array
    },
    //结果集数据
    chartYData:{
      type:Array
    },
    //表格标题
    titleText:{
      type:String
    },
    //表格副标题，例：‘万位’
    subText:{
      type:String
    },
    //是否显示结果集的bool值
    showLabel:{
      type:Boolean,
      default:true
    },
    //是否显示大小
    isBigSmall:{
      type:Boolean,
      default:false
    },
    //是否显示单双
    isOddEven:{
      type:Boolean,
      default:false
    },
    // 边和
    isMidedge:{
      type:Boolean,
      default:false
    },
    //是否显示龙虎和
    isLongHu:{
      type:Boolean,
      default:false
    },
    // 是否显示小双小单大小大单
    isHezhi:{
      type:Boolean,
      default:false
    },
    //最大刻度
    maxScale:{
      type:Number,
      default:10
    },
    // 最小刻度
    minScale:{
      type:Number,
      default:0
    },
    // y轴刻度
  splitNumber:{
    type:Number,
    default:5
  }
  },
  mounted() {
    this.drawLine();
  },
  //监听结果集
  watch:{
    chartYData(newValue, oldValue){
        this.chartYData = newValue;
        this.drawLine();
    },
    showLabel(newValue, oldValue){ //是否显示折线图点提示文字
      this.showLabel = newValue;
      this.drawLine();
    }
  },
  methods: {
    drawLine() {
      let chartsContainer = document.getElementById("myChart");
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(chartsContainer);
      let self = this;
      // 绘制图表
      myChart.setOption({
        title: {
          text: self.titleText,
          textStyle: {
            color: "#333",
            fontSize: 12,
            fontWeight: "normal"
          },
          subtext: self.subText,
          subtextStyle: {
            color: "#333",
            fontSize: 12,
            align: "center"
          }
        },
        xAxis: {
          type: "category",
          data: self.chartXData,
          axisLabel: {
            textStyle: {
              color: "#999",
              fontSize: "11"
            },
            rotate: 45
          },
          //X轴刻度长线
          splitLine: {
            show: true
          },
          axisPointer: {
            status: "show"
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#333",
              fontSize: "11"
            }
          },
          //Y轴显示的最小刻度和最大刻度
          min: self.minScale,
          max: self.maxScale,
          splitNumber: self.splitNumber
        },
        series: [
          {
            data: self.chartYData,
            connectNulls:true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#66baff",
                lineStyle: {
                  color: "#1a97ff"
                }
              }
            },
            symbol: "circle",
            symbolSize: 11,
            label: {
              show: self.showLabel,
              offset:[15,10],
              formatter(params) {
                if (self.isBigSmall) {
                  switch (params.value) {
                    case 0:
                      return "小";
                      break;
                    case 1:
                      return "大";
                      break;
                    default:
                      break;
                  }
                }
                if (self.isOddEven) {
                  switch (params.value) {
                    case 0:
                      return "双";
                      break;
                    case 1:
                      return "单";
                      break;
                    default:
                      break;
                  }
                }
                if (self.isMidedge) {
                  switch (params.value) {
                    case 0:
                      return "边";
                      break;
                    case 1:
                      return "中";
                      break;
                    default:
                      break;
                  }
                }
                if (self.isHezhi) {
                  switch (params.value) {
                    case 0:
                      return "小双";
                      break;
                    case 1:
                      return "小单";
                      break;
                    case 2:
                      return "大双";
                      break;
                    case 3:
                      return "大单";
                      break;
                    default:
                      break;
                  }
                }
                if (self.isLongHu) {
                  switch (params.value) {
                    case 0:
                      return "龙";
                      break;
                    case 1:
                      return "虎";
                      break;
                    case 2:
                      return "合";
                      break;
                    default:
                      break;
                  }
                }
              }
            }
          }
        ],
        tooltip: {},
        grid: {
          show: true,
          x: 30,
          y: 50,
          x2: 5,
          y2: 50,
          borderWidth:0
        }
      });
    },
    drawLongHu(para) {
      switch (para.value) {
        case 0:
          return "龙";
          break;
        case 1:
          return "虎";
          break;
        case 2:
          return "合";
          break;
        default:
          break;
      }
    },
    drawBigSmall(para) {
      switch (para.value) {
        case 0:
          return "小";
          break;
        case 1:
          return "大";
          break;
        default:
          break;
      }
    },
    drawOddEven(para) {
      switch (para.value) {
        case 0:
          return "双";
          break;
        case 1:
          return "单";
          break;
        default:
          break;
      }
    }
  }
};
</script>